<template>
	<view class="container">
		<!-- 文章标题 -->
		<view class="title">{{ acticle.title }}</view>

		<!-- 作者信息 -->
		<view class="user">
			<!-- 用户头像 -->
			<navigator :url="'/pages/user/user?userId=' + acticle.authorId" hover-class="none">
				<image class="user-header" :src="acticle.avatarUrl" mode="aspectFit" />
			</navigator>
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="user-name">{{ acticle.authorName }}</view>
				<view class="user-desc">{{ acticle.blogTypeName }}</view>
			</view>
			<!-- 关注按钮 -->
			<view v-if="!isFollowed" class="attention" @click="handleFollow(acticle.authorId)">
				<text>关 注</text>
			</view>
		</view>

		<!-- 文章内容 -->
		<view class="article-content">
			<rich-text :nodes="acticle.articleContent"></rich-text>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-nav">
			<view class="nav-item" @click="handleComment()">
				<image src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/comment.png" mode="aspectFill" />
				<text class="badge">{{ acticle.commentCount || '评论' }}</text>
			</view>
			<view class="nav-item" @click="handleLike(acticle.articleId)">
				<image v-if="!isLiked" src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/no-like.png"
					mode="aspectFill" />
				<image v-else src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/liked.png"
					mode="aspectFill" />
				<text class="badge">{{ acticle.likeCount || '喜欢'}}</text>
			</view>
			<view class="nav-item" @click="handleCollect(acticle.articleId)">
				<image v-if="!isCollected"
					src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/no-collect.png" mode="aspectFill" />
				<image v-else src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/collected.png"
					mode="aspectFill" />
				<text class="badge">{{ acticle.favoriteCount || '收藏' }}</text>
			</view>
			<view class="nav-item" @click="handleShare()">
				<image src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/no-collect.png"
					mode="aspectFill" />
				<text class="badge">分享</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				acticle: {},
				isLiked: false,
				isCollected: false,
				isFollowed: false,
				isTocOpen: false
			};
		},
		onLoad(options) {
			if (options.articleid) {
				this.getArticleDetail(options.articleid)
			}
		},
		methods: {
			/**
			 * 获取文章详情
			 */
			async getArticleDetail(articleId) {
				try {
					const data = await this.$api.article.getArticleDetail(articleId);
					if (data && data.code === 0) {
						// 使用mock数据中的字段
						this.acticle = data.data;
						this.isLiked = data.data.likeFlg;
						this.isCollected = data.data.favoriteFlg;
						// mock数据中没有isFollowed，默认设为false
						this.isFollowed = false;
					} else {
						this.acticle = {};
					}
				} catch (err) {
					console.error('获取文章详情失败:', err);
				}

			},

			/**
			 * 关注用户
			 */
			handleFollow(authorId) {
				this.isFollowed = true;
				uni.showToast({
					title: '关注成功',
					icon: 'success'
				});
			},

			/**
			 * 文章被点赞或取消点赞
			 */
			handleLike(articleId) {
				// 调用API更新点赞状态
				this.$api.article.likeArticle(articleId).then(({
					data
				}) => {
					if (data && data.code === 0) {
						// 更新本地状态
						this.isLiked = !this.isLiked;
						// 更新点赞数
						this.acticle.likeCount = this.isLiked ?
							(parseInt(this.acticle.likeCount) + 1).toString() :
							(parseInt(this.acticle.likeCount) - 1).toString();
						// 显示操作反馈
						uni.showToast({
							title: this.isLiked ? '点赞成功' : '取消点赞',
							icon: 'success',
							duration: 1500
						});
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'none',
							duration: 1500
						});
					}
				}).catch(err => {
					console.error('点赞失败:', err);
					uni.showToast({
						title: '点赞失败',
						icon: 'none',
						duration: 1500
					});
				});
			},

			/**
			 * 文章被收藏或取消收藏
			 */
			handleCollect(articleId) {
				// 调用API更新收藏状态
				this.$api.article.collectArticle(articleId).then(({
					data
				}) => {
					if (data && data.code === 0) {
						// 更新本地状态
						this.isCollected = !this.isCollected;
						// 更新收藏数
						this.acticle.favoriteCount = this.isCollected ?
							(parseInt(this.acticle.favoriteCount) + 1).toString() :
							(parseInt(this.acticle.favoriteCount) - 1).toString();
						// 显示操作反馈
						uni.showToast({
							title: this.isCollected ? '收藏成功' : '取消收藏',
							icon: 'success',
							duration: 1500
						});
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'none',
							duration: 1500
						});
					}
				}).catch(err => {
					console.error('收藏失败:', err);
					uni.showToast({
						title: '收藏失败',
						icon: 'none',
						duration: 1500
					});
				});
			},

			/**
			 * 评论功能
			 */
			handleComment() {
				uni.showToast({
					title: '评论功能待实现',
					icon: 'none'
				});
			},

			/**
			 * 分享功能
			 */
			handleShare() {
				uni.showToast({
					title: '分享功能待实现',
					icon: 'none'
				});
			}
		}
	};
</script>
<style lang="scss">
	@import './article.scss';
</style>